<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Document</title>
    <!--  jquery  -->
    <script src="./main.js"></script>
    <!--  layui   -->
    <link href="./utils/layui/css/layui.css" rel="stylesheet">
    <script src="./utils/layui/layui.js"></script>
    <!--  swiper  -->
    <link href="./utils/swiper/swiper-bundle.min.css" rel="stylesheet" />
    <script src="./utils/swiper/swiper-bundle.min.js"></script>
    <!--  marquee  -->
    <script src="./utils/marquee/jquery.marquee.min.js"></script>
    <!--  echarts  -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=31bf3196a224edf0b2db16ef76ff41e9"></script>
</head>

<!--    DOM   -->

<body>
<div id="master">
    <div class="header">
        <div class="titleBox">
            <img alt="" class="logo" src="./static/img/公司LOGO.png" />
            <div class="title">煤贸数港.曹妃甸</div>
        </div>
        <ul class="ulBox">
            <li><a href="">首页</a></li>
            <li><a href="">指数中心</a></li>
            <li><a href="">交易服务</a></li>
            <li><a href="">交割仓库</a></li>
            <li><a href="">融资方案</a></li>
            <li><a href="">数据中心</a></li>
            <li><a href="">产品中心</a></li>
            <li><a href="">平台共享</a></li>
            <li><a href="">新闻资讯</a></li>
            <li><a href="">关于我们</a></li>
        </ul>
        <div class="login">登录/注册</div>
    </div>
    <!--  指数中心  -->
    <section class="exponentially" id="exponentially">
        <!--  swiper  -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img alt="" src="./static/img/高育良.png" />
                </div>
                <div class="swiper-slide">
                    <img alt="" src="./static/img/沙瑞金.png" />
                </div>
                <div class="swiper-slide">
                    <img alt="" src="./static/img/祁同伟01.bmp" />
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!--   chartBox  -->
        <div class="chart">
            <div class="layui-tab" lay-filter="test-handle">

                <ul class="layui-tab-title">
                    <li style="width: 50%" class="layui-this" data-content="TTCI  &nbsp;&nbsp; 唐山动力煤现货价格指数" lay-id="33">TTCI &nbsp;&nbsp; 唐山动力煤现货价格指数</li>
                    <li  style="width: 50%"  data-content="TTCI &nbsp;&nbsp; 唐山海运煤炭价格指数" lay-id="44" style="width: 50%">TTCI &nbsp;&nbsp; 唐山海运煤炭价格指数</li>
                </ul>

                <!--   公告栏  -->
                <div class="layui-tab-content" style="margin-top: 0.5rem; padding: 0; margin-bottom: 0.2rem">
                    <div class="layui-tab-item layui-show" >


                        <div class="bulletinBoard">
                            <div style=" flex: 1; display: flex;justify-content: center;align-items: center;" >
                            <img alt="" src="./static/img/喇叭.png" style="width: 0.2rem" />
                        </div>


                            <div style="flex: 8; overflow: hidden">
                                <div class="container" style="overflow: hidden; padding: 0">
                                    <p style="color: #ababab">jQuery Marquee是一款基于 jQuery 的滚动插件，类似于 HTML 的 marquee 标签，但在marquee的基础上新增了许多可控功能。它可以应用于多种 Web 元素，包括文字、图片、表单等元素，同时它可以设置不同的滚动方向（上下左右）、滚动速度、无缝滚动等等，并且支持CSS3。 ———————————————— 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 原文链接：https://blog.csdn.net/DarinZanya/article/details/78952384
                                    </p>
                                </div>
                            </div>


                            <div style="flex: 1;border-left: 1px solid #ababab;display: flex;justify-content: center;align-items: center;background: #f8fbfd;">
                                <img alt="" src="./static/img/放大镜.png" style="width: 0.2rem"/>
                                <span>了解更多</span>
                            </div>
                        </div>
                        <!--  echarts  -->
                        <div style="width: 16rem /* 1600/100 */; flex: 1; display: flex; flex-direction: column; border: 2px solid #dbdbdb;height: 5.64rem  /* 564/100 */">

                            <ul style=" width: 100%;height: 1.2rem /* 170/100 */;display: flex;align-items: center;justify-content: center;">
                                <li style="flex: 3;height: 100%;border-right: 1px dashed #e5eff9;display: flex;align-items: center;justify-content: center;flex-direction: column;">
                                    <span style="color: #d9d9d9; font-size: 0.5rem; /* 50/100 */">780</span>
                                    <span>上期价格(元/吨)</span>
                                </li>
                                <li style="flex: 3;height: 100%;border-right: 1px dashed #e5eff9;display: flex;align-items: center;justify-content: center;flex-direction: column;">
                                    <span style="color: #284f93; font-size: 0.5rem; /* 50/100 */">785</span>
                                    <span>本期价格(元/吨)</span>
                                </li>
                                <li style="flex: 3;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
                                    <span style="color: #e2f0d9; font-size: 0.5rem; /* 50/100 */">-5%</span>
                                    <span>环比(元/吨)</span>
                                </li>

                            </ul>
                            <div id="chart" style="width: 100%; flex: 1"></div>

                        </div>
                        <!--  定制服务  -->
                        <div style="color: #397cba;margin-top: 0.2rem;width: 16rem;height: 0.6rem;display: flex;gap: 0.1rem;font-size: 0.18rem /* 18/100 */;">

                            <div style="flex: 2;height: 100%;border: 2px solid #1b69af;display: flex;justify-content: center;align-items: center;">
                                查看历史数据
                            </div>

                            <div style="flex: 2;height: 100%;border: 2px solid #1b69af;display: flex;justify-content: center;align-items: center;">
                                定制我的数据
                            </div>

                        </div>
                    </div>

                    <div class="layui-tab-item">
                        <div class="bulletinBoard">
                            <div style=" flex: 1; display: flex;justify-content: center;align-items: center;" >
                                <img alt="" src="./static/img/喇叭.png" style="width: 0.2rem" />
                            </div>
                            <div style="flex: 8; overflow: hidden">
                                <div class="container" style="overflow: hidden; padding: 0">
                                    <p style="color: #ababab">
                                        jQuery Marquee是一款基于 jQuery 的滚动插件，类似于 HTML 的
                                        marquee
                                        标签，但在marquee的基础上新增了许多可控功能。它可以应用于多种
                                        Web
                                        元素，包括文字、图片、表单等元素，同时它可以设置不同的滚动方向（上下左右）、滚动速度、无缝滚动等等，并且支持CSS3。
                                        ———————————————— 版权声明：本文为博主原创文章，遵循 CC 4.0
                                        BY-SA 版权协议，转载请附上原文出处链接和本声明。
                                        原文链接：https://blog.csdn.net/DarinZanya/article/details/78952384
                                    </p>
                                </div>
                            </div>
                            <div style="flex: 1;border-left: 1px solid #ababab;display: flex;justify-content: center;align-items: center;background: #f8fbfd;">
                                <img alt="" src="./static/img/放大镜.png" style="width: 0.2rem"/>
                                <span>了解更多</span>
                            </div>
                        </div>
                        <!--  echarts  -->
                        <div style="width: 16rem /* 1600/100 */; flex: 1; display: flex; flex-direction: column; border: 2px solid #dbdbdb;height: 5.64rem  /* 564/100 */">
                            <ul style=" width: 100%;height: 1.2rem /* 170/100 */;display: flex;align-items: center;justify-content: center;">
                                <li style="flex: 3;height: 100%;border-right: 1px dashed #e5eff9;display: flex;align-items: center;justify-content: center;flex-direction: column;">
                                    <span style="color: #d9d9d9; font-size: 0.5rem; /* 50/100 */">780</span>
                                    <span>上期价格(元/吨)</span>
                                </li>
                                <li style="flex: 3;height: 100%;border-right: 1px dashed #e5eff9;display: flex;align-items: center;justify-content: center;flex-direction: column;">
                                    <span style="color: #284f93; font-size: 0.5rem; /* 50/100 */">785</span>
                                    <span>本期价格(元/吨)</span>
                                </li>
                                <li style="flex: 3;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
                                    <span style="color: #e2f0d9; font-size: 0.5rem; /* 50/100 */">-5%</span>
                                    <span>环比(元/吨)</span>
                                </li>
                            </ul>
                            <div id="chart" style="width: 100%; flex: 1"></div>
                        </div>
                        <!--  定制服务  -->
                        <div style="color: #397cba;margin-top: 0.2rem;width: 16rem;height: 0.6rem;display: flex;gap: 0.1rem;font-size: 0.18rem /* 18/100 */;">
                            <div style="flex: 2;height: 100%;border: 2px solid #1b69af;display: flex;justify-content: center;align-items: center;">
                                查看历史数据
                            </div>
                            <div style="flex: 2;height: 100%;border: 2px solid #1b69af;display: flex;justify-content: center;align-items: center;">
                                定制我的数据
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </section>
    <!--  交易平台  -->
    <section class="marketplaceServices" id="marketplaceServices">
        <div style="height: 100%; width: 16rem; /* 1600/100 */">
            <div class="layui-tab" lay-filter="test-handle" style="border: 1px solid #fff">
                <ul class="layui-tab-title">
                    <li class="layui-this" data-content="煤贸数港现货交易平台" lay-id="33" >
                        煤贸数港现货交易平台
                    </li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <table class="layui-hide" id="ID-table-demo-data"></table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--  交易服务  -->
    <section class="tradeMode" id="tradeMode">
        <ul id="imageList">
            <li>
                <img alt="" src="./static/img/A1.png" />
                <div class="text-overlay">↓</div>
            </li>
            <li>
                <img alt="" src="./static/img/A2.png" />
                <div class="text-overlay">↓</div>
            </li>
            <li>
                <img alt="" src="./static/img/A3.png" />
                <div class="text-overlay">↓</div>
            </li>
            <li>
                <img alt="" src="./static/img/A4.png" />
                <div class="text-overlay">↓</div>
            </li>
            <li>
                <img alt="" src="./static/img/A5.png" />
                <div class="text-overlay">↓</div>
            </li>
        </ul>
        <div id="Banner">
            <div style="font-size: 1rem;font-weight: 600;letter-spacing: 0.4rem /* 30/100 */;">
                交易模式
            </div>
            <div style="color: #d7d6d6; font-size: 0.18rem; /* 16/100 */">
                Port Coal Market Professional Committee
            </div>
        </div>
    </section>
    <!--    产品   -->
    <section class="ProServe" id="ProServe">
        <div style="height: 1.8rem; width: 16rem; /* 1600/100 */">
            <div class="layui-tab" lay-filter="test-handle" style="   display: flex;   flex-direction: column;   overflow: hidden;   border: 1px solid #cccccc;">
                <ul class="layui-tab-title">
                    <li class="layui-this" data-content="煤贸数港线上数字产品" lay-id="33" style="width: 50%">
                        煤贸数港线上数字产品
                    </li>
                    <li data-content="煤贸数港线下行业服务" lay-id="44" style="width: 50%">
                        煤贸数港线下行业服务
                    </li>
                </ul>
                <div class="layui-tab-content" style="padding: 0; height: 1.25rem; background: #fff">
                    <div class="layui-tab-item layui-show" style="height: 100%">
                        <ul class="menu-list">
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon1.png" />
                                </div>
                                <p>价格数据</p>
                            </li>
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon2.png" />
                                </div>
                                <p>港口数据</p>
                            </li>
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon3.png" />
                                </div>
                                <p>船舶数据</p>
                            </li>
                            <li class="divider"></li>
                            <!-- 分割线 -->
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon4.png" />
                                </div>
                                <p>山西煤矿分布图</p>
                            </li>
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon5.png" />
                                </div>
                                <p>陕西煤矿分布图</p>
                            </li>
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon6.png" />
                                </div>
                                <p>内蒙古煤矿分布图</p>
                            </li>
                            <li class="divider"></li>
                            <!-- 分割线 -->
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon7.png" />
                                </div>
                                <p>会展服务</p>
                            </li>
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon8.png" />
                                </div>
                                <p>协会招商</p>
                            </li>
                        </ul>
                    </div>
                    <div class="layui-tab-item" style="height: 100%">
                        <ul class="menu-list">
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon1.png" />
                                </div>
                                <p>11</p>
                            </li>
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon2.png" />
                                </div>
                                <p>111</p>
                            </li>
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon3.png" />
                                </div>
                                <p>1111</p>
                            </li>
                            <li class="divider"></li>
                            <!-- 分割线 -->
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon4.png" />
                                </div>
                                <p>1111</p>
                            </li>
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon5.png" />
                                </div>
                                <p>1111</p>
                            </li>
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon6.png" />
                                </div>
                                <p>1111</p>
                            </li>
                            <li class="divider"></li>
                            <!-- 分割线 -->
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon7.png" />
                                </div>
                                <p>111</p>
                            </li>
                            <li>
                                <div class="icon-wrapper">
                                    <img alt="图标" src="icon8.png" />
                                </div>
                                <p>1111</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--    平台   -->
    <section class="HubShare" id="HubShare">
        <div class="horizontal-accordion" id="accordion">
            <div class="accordion-panel" style="background-color: #ff9999">1</div>
            <div class="accordion-panel" style="background-color: #99ccff">2</div>
            <div class="accordion-panel" style="background-color: #99ff99">3</div>
            <div class="accordion-panel" style="background-color: #ffcc99">4</div>
            <div class="accordion-panel" style="background-color: #ccccff">5</div>
        </div>
    </section>
    <!--  交割库   -->
    <section class="SettlementWarehouse" id="SettlementWarehouse">
    <div style="width: 16rem  /* 1600/100 */;height: 100%;">
        <div class="layui-tab" lay-filter="test-handle" style="border: 1px solid #fff">
            <ul class="layui-tab-title">
                <li class="layui-this" data-content="煤炭交割库" lay-id="33" >
                    煤炭交割库
                </li>
            </ul>
            <div class="layui-tab-content" style="padding: 0;width:100%;height: 100%">
                <div class="layui-tab-item layui-show">
                    <div style="width: 100%;height: 7.43rem;display: flex;flex-direction: column  /* 743/100 */">
                        <div class="SettlementWarehouseTitle" style="width: 100%;height: 1rem  /* 200/100 */;background: #fff;display: flex; align-items: center; justify-content: space-around;;padding: 0 0.8rem  /* 80/100 */;box-sizing: border-box;">
                        <div style="font-size: 0.24rem  /* 24/100 */;width: 50%;text-align: center">河北省 | 内蒙古 | 陕西 | 山西 </div>
                       <div style="height: 50%;flex:1;width: 50%;display: flex;justify-content: center;align-items: center;border-radius: 0.2rem  /* 20/100 */;overflow:hidden;background:#5879B4;overflow: hidden;color: #fff">
                           <ul style="width: 5.5rem;height: 100%;display: flex;justify-content: space-around;align-items: center;font-size: 0.24rem  /* 24/100 */;">
                               <li style="cursor:pointer">煤炭</li>
                               <li style="cursor:pointer">矿石</li>
                               <li style="cursor:pointer">天然气</li>
                               <li style="cursor:pointer">原油</li>
                               <li style="cursor:pointer">木材</li>
                           </ul>
                           <div style="flex: 1;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 0.24rem  /* 24/100 */">更多>></div>
                       </div>
                        </div>
                        <div class="SettlementWarehouseContainer" style="flex: 1;width: 100%;">
                            <div style="height: 5.53rem;display: flex;flex-direction: column;padding-bottom:.4rem;box-sizing: border-box;">
                                <div class="top" style="flex: 3;padding: .4rem;box-sizing: border-box;font-size: .38rem;font-weight: 600;letter-spacing:.08rem">国投曹妃甸港口有限公司</div>
                                <div class="bottom" style="flex: 3;display: flex;justify-content: flex-end;align-items:self-end;gap: .6rem" >
                                    <div class="num">
                                        <div style="font-size: .28rem;font-weight: 600">18个</div>
                                        <div>煤炭泊位</div>
                                    </div>
                                    <div class="num">
                                        <div style="font-size: .28rem;font-weight: 600">192个</div>
                                        <div>仓储垛位</div>
                                    </div>
                                    <div class="num">
                                        <div style="font-size: .28rem;font-weight: 600">186万㎡</div>
                                        <div>堆场面积</div>
                                    </div>
                                </div>
                            </div>
                            <ul style="width: 100%;height:.9rem;display: flex">
                                <li style="flex: 3;height: 100%;overflow: hidden;">
                                    <img src="../static/img/A5.png" alt="">
                                </li>
                                <li style="flex: 3;height: 100%;overflow: hidden;">
                                    <img src="../static/img/A1.png" alt="">
                                </li>
                                <li style="flex: 3;height: 100%;overflow: hidden;">
                                    <img src="../static/img/A2.png" alt="">
                                </li>
                                <li style="flex: 3;height: 100%;overflow: hidden;">
                                    <img src="../static/img/A3.png" alt="">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>
    <!--   地图    -->
    <section class="map" style="width: 100%;display: flex;justify-content: center;margin-top: 0.8rem  /* 80/100 */;margin-bottom: 1.4rem  ">
        <div style="width: 16rem  /* 1600/100 */;height: 8rem  /* 800/100 */;" id="map"></div>
    </section>
    <!--  资讯  -->
    <section class="News Updates" id="News Updates" style="width: 100%;display: flex;justify-content: center;margin-top: 0.8rem  /* 80/100 */;">
        <div style="width: 16rem  /* 1600/100 */;height: 7rem  /* 800/100 */">
                <div class="layui-tab" lay-filter="test-handle" style="   display: flex;   flex-direction: column;   overflow: hidden;">
                    <ul class="layui-tab-title">
                        <li class="layui-this" data-content="新闻资讯" lay-id="33" style="width: 50%">
                            新闻资讯
                        </li>
                        <li data-content="精品阅读" lay-id="44" style="width: 50%">
                            精品阅读
                        </li>
                    </ul>
                    <div class="layui-tab-content" style="padding: 0;  background: #fff;margin-top:.6rem;border: 1px solid #ccc;border-radius: 0.2rem  /* 20/100 */">
                        <div class="layui-tab-item layui-show" style="height: 100%">
                            <ul style="height: 100%;padding-top: .2rem  /* 100/100 */;padding-right: .6rem">
                                <li style="display: flex">
                                    <div style="width:3rem  /* 60/100 */;height: 1.6rem  /* 160/100 */;display: flex;flex-direction:column;justify-content: center;align-items: center;">
                                        <div style="color: #B2B2B2;font-size: 0.36rem  /* 32/100 */">05</div>
                                        <div style="color: #B2B2B2;font-size: 0.28rem ">2024/9/26</div>
                                    </div>
                                    <div style="flex: 1;height: 1.6rem;display: flex;flex-direction:column;justify-content: center;overflow: hidden">
                                        <div style="color: #000;font-size: 0.28rem  /* 32/100 */">格预测活动!最高获2000元现金大奖!</div>
                                        <div style="color: #B2B2B2;font-size: 0.24rem;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;/">环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.</div>
                                    </div>
                                </li>
                                <li style="display: flex">
                                    <div style="width:3rem  /* 60/100 */;height: 1.6rem  /* 160/100 */;display: flex;flex-direction:column;justify-content: center;align-items: center;">
                                        <div style="color: #B2B2B2;font-size: 0.36rem  /* 32/100 */">05</div>
                                        <div style="color: #B2B2B2;font-size: 0.28rem ">2024/9/26</div>
                                    </div>
                                    <div style="flex: 1;height: 1.6rem;display: flex;flex-direction:column;justify-content: center;overflow: hidden">
                                        <div style="color: #000;font-size: 0.28rem  /* 32/100 */">格预测活动!最高获2000元现金大奖!</div>
                                        <div style="color: #B2B2B2;font-size: 0.24rem;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;/">环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.</div>
                                    </div>
                                </li>    <li style="display: flex">
                                <div style="width:3rem  /* 60/100 */;height: 1.6rem  /* 160/100 */;display: flex;flex-direction:column;justify-content: center;align-items: center;">
                                    <div style="color: #B2B2B2;font-size: 0.36rem  /* 32/100 */">05</div>
                                    <div style="color: #B2B2B2;font-size: 0.28rem ">2024/9/26</div>
                                </div>
                                <div style="flex: 1;height: 1.6rem;display: flex;flex-direction:column;justify-content: center;overflow: hidden">
                                    <div style="color: #000;font-size: 0.28rem  /* 32/100 */">格预测活动!最高获2000元现金大奖!</div>
                                    <div style="color: #B2B2B2;font-size: 0.24rem;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;/">环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.</div>
                                </div>
                            </li>
                            </ul>
                        </div>
                        <div class="layui-tab-item" style="height: 100%">
                            <ul style="height: 100%;padding-top: .2rem  /* 100/100 */;padding-right: .6rem">
                                <li style="display: flex">
                                    <div style="width:3rem  /* 60/100 */;height: 1.6rem  /* 160/100 */;display: flex;flex-direction:column;justify-content: center;align-items: center;">
                                        <div style="color: #B2B2B2;font-size: 0.36rem  /* 32/100 */">05</div>
                                        <div style="color: #B2B2B2;font-size: 0.28rem ">2024/9/26</div>
                                    </div>
                                    <div style="flex: 1;height: 1.6rem;display: flex;flex-direction:column;justify-content: center;overflow: hidden">
                                        <div style="color: #000;font-size: 0.28rem  /* 32/100 */">格预测活动!最高获2000元现金大奖!</div>
                                        <div style="color: #B2B2B2;font-size: 0.24rem;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;/">环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.</div>
                                    </div>
                                </li>
                                <li style="display: flex">
                                    <div style="width:3rem  /* 60/100 */;height: 1.6rem  /* 160/100 */;display: flex;flex-direction:column;justify-content: center;align-items: center;">
                                        <div style="color: #B2B2B2;font-size: 0.36rem  /* 32/100 */">05</div>
                                        <div style="color: #B2B2B2;font-size: 0.28rem ">2024/9/26</div>
                                    </div>
                                    <div style="flex: 1;height: 1.6rem;display: flex;flex-direction:column;justify-content: center;overflow: hidden">
                                        <div style="color: #000;font-size: 0.28rem  /* 32/100 */">格预测活动!最高获2000元现金大奖!</div>
                                        <div style="color: #B2B2B2;font-size: 0.24rem;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;/">环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.</div>
                                    </div>
                                </li>    <li style="display: flex">
                                <div style="width:3rem  /* 60/100 */;height: 1.6rem  /* 160/100 */;display: flex;flex-direction:column;justify-content: center;align-items: center;">
                                    <div style="color: #B2B2B2;font-size: 0.36rem  /* 32/100 */">05</div>
                                    <div style="color: #B2B2B2;font-size: 0.28rem ">2024/9/26</div>
                                </div>
                                <div style="flex: 1;height: 1.6rem;display: flex;flex-direction:column;justify-content: center;overflow: hidden">
                                    <div style="color: #000;font-size: 0.28rem  /* 32/100 */">格预测活动!最高获2000元现金大奖!</div>
                                    <div style="color: #B2B2B2;font-size: 0.24rem;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;/">环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.环渤海港口动力煤现货价格专家预测系统运行活动近期，找煤网自主研发的“环渤海港口动力煤现货价格专家预测系统”正式上线预测运行，为测.</div>
                                </div>
                            </li>
                            </ul>
                        </div>
                    </div>
                </div>

        </div>
    </section>
<!--  友情链接  -->
    <section style="width: 100%;height: 5rem;display: flex;justify-content: center;background: #060E29">
        <div style="width: 100%;background: #060E29;display: flex;flex-direction: column;align-items: center;">
           <div style="width: 100%;height: 0.75rem  /* 75/100 */;display: flex;justify-content: center;background: #0C173B">
                <div style="width:12rem  /* 800/100 */;height: 0.75rem  /* 75/100 */;display: flex;align-items: center;color: #fff;font-size: 0.18rem  /* 18/100 */">友情链接</div>
           </div>
            <div style="width: 12rem;color: #fff;padding-top: 0.4rem;display: flex;border-bottom: 1px solid #fff;padding-bottom: 0.4rem  /* 40/100 */">
                <div style="width: 8rem">
                    <ul style="width: 100%;display: flex;gap: 0.4rem  /* 40/100 */;font-size: 0.18rem  /* 18/100 */">
                        <li style="flex: 3">
                            <div class="liTitle" style="margin-bottom: 0.4rem  /* 40/100 */">产品中心</div>
                            <ul style="font-size: 0.14rem  /* 16/100 */;display: flex;flex-direction: column;gap: 0.2rem  ">
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                            </ul>
                        </li>
                        <li style="flex: 3">
                            <div class="liTitle" style="margin-bottom: 0.4rem  /* 40/100 */">产品中心</div>
                            <ul style="font-size: 0.14rem  /* 16/100 */;display: flex;flex-direction: column;gap: 0.2rem  ">
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                            </ul>
                        </li>
                        <li style="flex: 3">
                            <div class="liTitle" style="margin-bottom: 0.4rem  /* 40/100 */">产品中心</div>
                            <ul style="font-size: 0.14rem  /* 16/100 */;display: flex;flex-direction: column;gap: 0.2rem  ">
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                            </ul>
                        </li>
                        <li style="flex: 3">
                            <div class="liTitle" style="margin-bottom: 0.4rem  /* 40/100 */">产品中心</div>
                            <ul style="font-size: 0.14rem  /* 16/100 */;display: flex;flex-direction: column;gap: 0.2rem  ">
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                                <li>在线交易平台</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div style="flex: 1;height: 100%;display: flex;justify-content: center;gap: 0.4rem  ">
                    <img src="./static/img/A5.png" alt="" style="width: 2rem;height: 2rem">
                    <img src="./static/img/A5.png" alt="" style="width: 2rem;height: 2rem">
                </div>
            </div>
            <div style="color: #fff;width: 12rem;margin-top: 0.4rem  /* 40/100 */">
            <ul style="width: 100%;display: flex;font-size: 0.18rem ;justify-content: center;align-items: center">
                <li style="width: 120px;text-align: center">加入我们</li>
                <li style="width: 120px;text-align: center;border-left: 1px solid #fff;border-right: 1px solid #fff">意见反馈</li>
                <li style="width: 120px;text-align: center">法律声明</li>
            </ul>
                <br>
              <div style="margin: 0 auto;text-align: center">
                  copyright © 2021 神木市创优能源科技有限公司　备案号：陕ICP备2021004845号 　
              </div>
            </div>
        </div>
    </section>
</div>
</body>
<script>

    // 获取所有 img 元素
    const images = document.querySelectorAll("#imageList img");
    // 遍历每个 img 元素并绑定事件
    images.forEach((img, index) => {
        // 鼠标移入事件
        img.addEventListener("mouseenter", () => {
            console.log(`Mouse entered on Image ${index + 1}`); // 打印移入的图片索引
            img.style.transform = "scale(1.2)"; // 图片放大
        });

        // 鼠标移出事件
        img.addEventListener("mouseleave", () => {
            console.log(`Mouse left Image ${index + 1}`); // 打印移出的图片索引
            img.style.transform = "scale(1)"; // 恢复原大小
        });
    });



    var mySwiper = new Swiper(".swiper", {
        direction: "horizontal", // 横向滚动
        loop: true, // 是否循环滚动
        pagination: false,
        effect: "fade",
        autoplay: {
            pauseOnMouseEnter: true,
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
    });



    $(".container").marquee({
        direction: "left", //方向（默认为left，下同）
        duration: 15000, //滚动时长（单位：毫秒）
        gap: 20, //滚动一个周期的间距（单位：px）
        delayBeforeStart: 0, //滚动开始延迟时间（单位：毫秒）
        duplicated: true, //无缝衔接
    });



    $(document).ready(function () {
        // 获取容器
        var myChart = echarts.init(document.getElementById("chart"));
        // 配置折线图数据
        var option = {
            tooltip: {
                trigger: "axis",
            },
            grid: {
                top: 30,
            },
            legend: {
                data: [
                    "动力煤综合走势",
                    "动力煤现货5500",
                    "动力煤现货5000",
                    "动力煤现货4500",
                ],
                bottom: 10,
                itemWidth: 16, // 设置图例项的宽度
                itemHeight: 16, // 设置图例项的高度
                icon: "rect",
                textStyle: {
                    fontSize: 16, // 设置字体大小
                    color: "#333", // 设置字体颜色
                    lineHeight: 18, // 设置行高，确保与 itemHeight 一致
                },
                itemGap: 80, // 图例项之间的间距
                selected: {
                    动力煤综合走势: true, // 默认显示的系列
                    动力煤现货5500: false, // 隐藏的系列
                    动力煤现货5000: false,
                    动力煤现货4500: false,
                },
            },
            xAxis: {
                type: "category",
                data: [
                    "2024/01/01",
                    "2024/02/01",
                    "2024/03/01",
                    "2024/04/01",
                    "2024/05/01",
                    "2024/06/01",
                    "2024/07/01",
                    "2024/08/01",
                    "2024/09/01",
                    "2024/10/01",
                    "2024/11/01",
                    "2024/12/01",
                ],
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    name: "动力煤综合走势", // 图例项名称
                    data: [
                        5312, 9023, 2142, 8394, 5732, 2318, 5980, 7354, 9652, 3665, 8241,
                        5731,
                    ],
                    type: "line",
                    lineStyle: {
                        width: 3,
                        color: "#5B9BD5",
                        shadowColor: "#9E9F9F",
                        shadowOffsetX: -3,
                        shadowOffsetY: 1,
                    },
                    symbol: "circle",
                    symbolSize: 10,
                    label: {
                        show: true,
                        position: "outside",
                        formatter: "{c}",
                        padding: [5, 10],
                        borderRadius: 5,
                        fontSize: 14,
                        fontWeight: "bold",
                        color: "#838383",
                    },
                },
                {
                    name: "动力煤现货5500",
                    data: [
                        6123, 7321, 1987, 6502, 4309, 3157, 5023, 8047, 8234, 4938, 6513,
                        4433,
                    ],
                    type: "line",
                    lineStyle: {
                        width: 3,
                        color: "#FF8C00",
                        shadowColor: "#9E9F9F",
                        shadowOffsetX: -3,
                        shadowOffsetY: 1,
                    },
                    symbol: "circle",
                    symbolSize: 10,
                    label: {
                        show: true,
                        position: "outside",
                        formatter: "{c}",
                        padding: [5, 10],
                        borderRadius: 5,
                        fontSize: 14,
                        fontWeight: "bold",
                        color: "#838383",
                    },
                },
                {
                    name: "动力煤现货5000",
                    data: [
                        4331, 7842, 3245, 4937, 6132, 2579, 7081, 9120, 7465, 5627, 7013,
                        5183,
                    ],
                    type: "line",
                    lineStyle: {
                        width: 3,
                        color: "#28A745",
                        shadowColor: "#9E9F9F",
                        shadowOffsetX: -3,
                        shadowOffsetY: 1,
                    },
                    symbol: "circle",
                    symbolSize: 10,
                    label: {
                        show: true,
                        position: "outside",
                        formatter: "{c}",
                        padding: [5, 10],
                        borderRadius: 5,
                        fontSize: 14,
                        fontWeight: "bold",
                        color: "#838383",
                    },
                },
                {
                    name: "动力煤现货4500",
                    data: [
                        3584, 6124, 2942, 4689, 5075, 3298, 6194, 8270, 9210, 6718, 6581,
                        5799,
                    ],
                    type: "line",
                    lineStyle: {
                        width: 3,
                        color: "#DC3545",
                        shadowColor: "#9E9F9F",
                        shadowOffsetX: -3,
                        shadowOffsetY: 1,
                    },
                    symbol: "circle",
                    symbolSize: 10,
                    label: {
                        show: true,
                        position: "outside",
                        formatter: "{c}",
                        padding: [5, 10],
                        borderRadius: 5,
                        fontSize: 14,
                        fontWeight: "bold",
                        color: "#838383",
                    },
                },
            ],
        };
        myChart.setOption(option);
        // 使用指定的配置项和数据显示图表
        let map, markers = [], currentInfoWindow = null;

        // 默认地图配置
        const defaultCenter = [110.709181, 39.307942];
        const defaultZoom = 4;

        // 煤矿数据模拟接口
        const getCenterMap = () => {
            return Promise.resolve([
                { mine_id: '1', mine_short_name: '煤矿A', lng: 110.5, lat: 39.1, planNum: 500, realNum: 300 },
                { mine_id: '2', mine_short_name: '煤矿B', lng: 110.7, lat: 39.4, planNum: 800, realNum: 700 },
                { mine_id: '3', mine_short_name: '煤矿C', lng: 111.0, lat: 39.3, planNum: 1000, realNum: 950 },
            ]);
        };

        // 初始化高德地图
        function initAMap() {
            map = new AMap.Map('map', {
                center: defaultCenter,
                zoom: defaultZoom,
            });

            loadMineData();
        }

        // 加载煤矿数据并添加标记
        function loadMineData() {
            getCenterMap().then(data => {
                const $mineSelector = $('#mineSelector');
                $mineSelector.empty().append('<option value="">请选择煤矿</option>');

                // 清除旧标记
                markers.forEach(marker => marker.setMap(null));
                markers = [];

                data.forEach(mine => {
                    // 添加标记
                    const marker = new AMap.Marker({
                        position: [mine.lng, mine.lat],
                        map: map,
                        icon: createDefaultIcon(),
                    });

                    // 信息窗口
                    const infoContent = `
          <div  style="width:5rem;display: flex;flex-direction: column;gap: 0.3rem  /* 30/100 */">
            <p><strong>煤矿简称：</strong>${mine.mine_short_name}</p>
            <p><strong>核定产能：</strong>${mine.planNum} 万吨</p>
            <p><strong>完成数：</strong>${mine.realNum} 万吨</p>
          </div>
        `;

                    marker.on('click', () => {
                        if (currentInfoWindow) currentInfoWindow.close();
                        currentInfoWindow = new AMap.InfoWindow({
                            content: infoContent,
                            offset: new AMap.Pixel(0, -30),
                        });
                        currentInfoWindow.open(map, marker.getPosition());
                    });

                    // 绑定标记到煤矿
                    markers.push({ mine_id: mine.mine_id, marker });

                    // 添加到选择框
                    $mineSelector.append(new Option(mine.mine_short_name, mine.mine_id));
                });
            });
        }

        // 创建默认标记图标
        function createDefaultIcon() {
            return new AMap.Icon({
                size: new AMap.Size(16, 42),
                image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                imageSize: new AMap.Size(16, 24),
            });
        }

        // 创建高亮标记图标
        function createHighlightIcon() {
            return new AMap.Icon({
                size: new AMap.Size(16, 24),
                image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
                imageSize: new AMap.Size(16, 24),
            });
        }

        // 切换煤矿时的处理逻辑
        $('#mineSelector').on('change', function () {
            const selectedId = $(this).val();
            if (!selectedId) {
                // 恢复所有标记
                markers.forEach(item => item.marker.setIcon(createDefaultIcon()));
                map.setZoomAndCenter(defaultZoom, defaultCenter);
            } else {
                markers.forEach(item => {
                    if (item.mine_id === selectedId) {
                        item.marker.setIcon(createHighlightIcon());
                        map.setZoomAndCenter(12, item.marker.getPosition());
                    } else {
                        item.marker.setIcon(createDefaultIcon());
                    }
                });
            }
        });

        // 初始化地图
        initAMap();
    });




    layui.use("table", function () {
        var table = layui.table;
        // 已知数据渲染
        var inst = table.render({
            elem: "#ID-table-demo-data",
            cols: [
                [
                    //标题栏
                    {
                        field: "status",
                        title: "状态",
                        width: 180,
                        align: "center",
                        templet: function (d) {
                            // 根据状态设置不同的背景色
                            if (d.status === "进行中") {
                                return '<span style="width: 0.6rem;display: inline-block;background-color: #4CAF50; color: white; border-radius: 5px;">进行中</span>';
                            } else if (d.status === "待处理") {
                                return '<span style="width: 0.6rem;display: inline-block;background-color: #FF9800; color: white; border-radius: 5px;">待处理</span>';
                            } else if (d.status === "已完成") {
                                return '<span style="width: 0.6rem;display: inline-block;background-color: #2196F3; color: white; border-radius: 5px;">已完成</span>';
                            } else if (d.status === "取消") {
                                return '<span style="width: 0.6rem;display: inline-block;background-color: #F44336; color: white; border-radius: 5px;">取消</span>';
                            }
                            return '<span style="width: 0.6rem;display: inline-block;background-color: #9E9E9E; color: white; border-radius: 5px;">未知</span>';
                        },
                    },
                    {
                        field: "broker",
                        title: "交易委托商",
                        width: 278,
                        align: "center",
                    },
                    { field: "coalType", title: "煤种", width: 240, align: "center" },
                    {
                        field: "startTime",
                        title: "开始时间",
                        width: 180,
                        align: "center",
                    },
                    {
                        field: "endTime",
                        title: "结束时间",
                        width: 180,
                        align: "center",
                    },
                    { field: "quantity", title: "总量", width: 180, align: "center" },
                    {
                        field: "startingPrice",
                        title: "起拍价",
                        width: 180,
                        align: "center",
                    },
                    {
                        field: "operation",
                        title: "操作",
                        width: 180,
                        align: "center",
                        templet: function (d) {
                            return '<span style="width: 0.8rem;display: inline-block;background-color: #2196F3; color: white; border-radius: 5px;">查看详情</span>';
                        },
                    },
                ],
            ],
            data: [
                {
                    status: "进行中",
                    broker: "华东煤炭公司",
                    coalType: "无烟煤",
                    startTime: "2025-01-01",
                    endTime: "2025-01-05",
                    quantity: 5000,
                    startingPrice: 120.5,
                    operation: "竞拍",
                },
                {
                    status: "待处理",
                    broker: "北方能源集团",
                    coalType: "烟煤",
                    startTime: "2025-01-10",
                    endTime: "2025-01-15",
                    quantity: 10000,
                    startingPrice: 95.0,
                    operation: "查看",
                },
                {
                    status: "已完成",
                    broker: "中煤国际",
                    coalType: "褐煤",
                    startTime: "2025-01-03",
                    endTime: "2025-01-08",
                    quantity: 7000,
                    startingPrice: 88.3,
                    operation: "详情",
                },
                {
                    status: "取消",
                    broker: "南方贸易公司",
                    coalType: "无烟煤",
                    startTime: "2025-02-01",
                    endTime: "2025-02-05",
                    quantity: 4000,
                    startingPrice: 110.0,
                    operation: "查看",
                },
                {
                    status: "进行中",
                    broker: "华中煤炭有限公司",
                    coalType: "烟煤",
                    startTime: "2025-03-01",
                    endTime: "2025-03-05",
                    quantity: 6000,
                    startingPrice: 98.0,
                    operation: "竞拍",
                },
                {
                    status: "已完成",
                    broker: "西北能源集团",
                    coalType: "褐煤",
                    startTime: "2025-01-15",
                    endTime: "2025-01-20",
                    quantity: 8000,
                    startingPrice: 90.5,
                    operation: "详情",
                },
                {
                    status: "进行中",
                    broker: "中南矿业",
                    coalType: "无烟煤",
                    startTime: "2025-04-01",
                    endTime: "2025-04-06",
                    quantity: 5500,
                    startingPrice: 125.0,
                    operation: "竞拍",
                },
                {
                    status: "待处理",
                    broker: "东北煤业公司",
                    coalType: "烟煤",
                    startTime: "2025-05-01",
                    endTime: "2025-05-07",
                    quantity: 12000,
                    startingPrice: 93.0,
                    operation: "查看",
                },
                {
                    status: "已完成",
                    broker: "中原能源",
                    coalType: "褐煤",
                    startTime: "2025-06-01",
                    endTime: "2025-06-06",
                    quantity: 7500,
                    startingPrice: 87.5,
                    operation: "详情",
                },
                {
                    status: "取消",
                    broker: "东南煤炭有限公司",
                    coalType: "无烟煤",
                    startTime: "2025-07-01",
                    endTime: "2025-07-05",
                    quantity: 3000,
                    startingPrice: 130.0,
                    operation: "查看",
                },
            ],
            skin: "nob", // 表格风格
            //even: true,
            page: false, // 是否显示分页
        });
    });





    layui.use("table", function () {
        var table = layui.table;
        // 已知数据渲染
        var inst = table.render({
            elem: "#ID-table-demo-dataA",
            cols: [
                [
                    //标题栏
                    {
                        field: "status",
                        title: "状态",
                        width: 180,
                        align: "center",
                        templet: function (d) {
                            // 根据状态设置不同的背景色
                            if (d.status === "进行中") {
                                return '<span style="width: 0.6rem;display: inline-block;background-color: #4CAF50; color: white; border-radius: 5px;">进行中</span>';
                            } else if (d.status === "待处理") {
                                return '<span style="width: 0.6rem;display: inline-block;background-color: #FF9800; color: white; border-radius: 5px;">待处理</span>';
                            } else if (d.status === "已完成") {
                                return '<span style="width: 0.6rem;display: inline-block;background-color: #2196F3; color: white; border-radius: 5px;">已完成</span>';
                            } else if (d.status === "取消") {
                                return '<span style="width: 0.6rem;display: inline-block;background-color: #F44336; color: white; border-radius: 5px;">取消</span>';
                            }
                            return '<span style="width: 0.6rem;display: inline-block;background-color: #9E9E9E; color: white; border-radius: 5px;">未知</span>';
                        },
                    },
                    {
                        field: "broker",
                        title: "交易委托商",
                        width: 278,
                        align: "center",
                    },
                    { field: "coalType", title: "煤种", width: 240, align: "center" },
                    {
                        field: "startTime",
                        title: "开始时间",
                        width: 180,
                        align: "center",
                    },
                    {
                        field: "endTime",
                        title: "结束时间",
                        width: 180,
                        align: "center",
                    },
                    { field: "quantity", title: "总量", width: 180, align: "center" },
                    {
                        field: "startingPrice",
                        title: "起拍价",
                        width: 180,
                        align: "center",
                    },
                    {
                        field: "operation",
                        title: "操作",
                        width: 180,
                        align: "center",
                        templet: function (d) {
                            return '<span style="width: 0.8rem;display: inline-block;background-color: #2196F3; color: white; border-radius: 5px;">查看详情</span>';
                        },
                    },
                ],
            ],
            data: [
                {
                    status: "进行中",
                    broker: "华东煤炭公司",
                    coalType: "无烟煤",
                    startTime: "2025-01-01",
                    endTime: "2025-01-05",
                    quantity: 5000,
                    startingPrice: 120.5,
                    operation: "竞拍",
                },
                {
                    status: "待处理",
                    broker: "北方能源集团",
                    coalType: "烟煤",
                    startTime: "2025-01-10",
                    endTime: "2025-01-15",
                    quantity: 10000,
                    startingPrice: 95.0,
                    operation: "查看",
                },
                {
                    status: "已完成",
                    broker: "中煤国际",
                    coalType: "褐煤",
                    startTime: "2025-01-03",
                    endTime: "2025-01-08",
                    quantity: 7000,
                    startingPrice: 88.3,
                    operation: "详情",
                },
                {
                    status: "取消",
                    broker: "南方贸易公司",
                    coalType: "无烟煤",
                    startTime: "2025-02-01",
                    endTime: "2025-02-05",
                    quantity: 4000,
                    startingPrice: 110.0,
                    operation: "查看",
                },
                {
                    status: "进行中",
                    broker: "华中煤炭有限公司",
                    coalType: "烟煤",
                    startTime: "2025-03-01",
                    endTime: "2025-03-05",
                    quantity: 6000,
                    startingPrice: 98.0,
                    operation: "竞拍",
                },
                {
                    status: "已完成",
                    broker: "西北能源集团",
                    coalType: "褐煤",
                    startTime: "2025-01-15",
                    endTime: "2025-01-20",
                    quantity: 8000,
                    startingPrice: 90.5,
                    operation: "详情",
                },
                {
                    status: "进行中",
                    broker: "中南矿业",
                    coalType: "无烟煤",
                    startTime: "2025-04-01",
                    endTime: "2025-04-06",
                    quantity: 5500,
                    startingPrice: 125.0,
                    operation: "竞拍",
                },
                {
                    status: "待处理",
                    broker: "东北煤业公司",
                    coalType: "烟煤",
                    startTime: "2025-05-01",
                    endTime: "2025-05-07",
                    quantity: 12000,
                    startingPrice: 93.0,
                    operation: "查看",
                },
                {
                    status: "已完成",
                    broker: "中原能源",
                    coalType: "褐煤",
                    startTime: "2025-06-01",
                    endTime: "2025-06-06",
                    quantity: 7500,
                    startingPrice: 87.5,
                    operation: "详情",
                },
                {
                    status: "取消",
                    broker: "东南煤炭有限公司",
                    coalType: "无烟煤",
                    startTime: "2025-07-01",
                    endTime: "2025-07-05",
                    quantity: 3000,
                    startingPrice: 130.0,
                    operation: "查看",
                },
            ],
            skin: "nob", // 表格风格
            //even: true,
            page: false, // 是否显示分页
        });
    });





    // 获取所有区域
    let hasFaded = false;
    const sections = document.querySelectorAll("section");
    window.addEventListener("scroll", () => {
        // 获取滚动位置
        const scrollPosition = window.scrollY + window.innerHeight / 2;
        let isFading = false; // 标志位
        sections.forEach((section) => {
            // 获取每个区域的位置
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;

            // 判断是否在当前区域
            if (
                scrollPosition >= sectionTop &&
                scrollPosition < sectionTop + sectionHeight
            ) {
                console.log(section.id);
                if (section.id === "tradeMode" && !hasFaded) {
                    hasFaded = true; // 标志触发过
                    const targetDom = document.getElementById("Banner");
                    targetDom.style.transition = "opacity 2s ease";
                    targetDom.style.opacity = "0"; // 渐隐效果
                    console.log("渐隐效果触发！");

                    targetDom.addEventListener(
                        "transitionend",
                        () => {
                            targetDom.parentNode.removeChild(targetDom); // 移除 DOM
                            console.log("Banner DOM 已销毁！");
                        },
                        { once: true }
                    ); // `once: true` 确保监听器只触发一次
                }
            }
        });
    });




    // 获取所有的 <li> 元素
    const listItems = document.querySelectorAll("#imageList li");
    listItems.forEach((li) => {
        const img = li.querySelector("img");
        const textOverlay = li.querySelector(".text-overlay");

        // 创建透明玻璃效果层
        const glassEffect = document.createElement("div");
        glassEffect.classList.add("glass-effect");
        li.appendChild(glassEffect);

        // 鼠标移入事件
        li.addEventListener("mouseenter", () => {
            glassEffect.style.opacity = "0"; // 淡化玻璃效果
            img.style.transform = "scale(1.05)"; // 放大图片
            textOverlay.style.opacity = "1"; // 显示文字
        });

        // 鼠标移出事件
        li.addEventListener("mouseleave", () => {
            glassEffect.style.opacity = "1"; // 恢复玻璃效果
            img.style.transform = "scale(1)"; // 恢复图片大小
            textOverlay.style.opacity = "0"; // 隐藏文字
        });

        // 在透明玻璃层完全淡化后移除它
        glassEffect.addEventListener("transitionend", () => {
            if (glassEffect.style.opacity === "0") {
                glassEffect.remove(); // 移除透明玻璃效果层
                console.log("透明玻璃效果已销毁");
            }
        });
    });




    document.addEventListener("DOMContentLoaded", () => {
        const accordion = document.getElementById("accordion");
        const panels = accordion.querySelectorAll(".accordion-panel");

        // 初始化时记录每个面板的原始颜色和文字内容
        panels.forEach((panel) => {
            panel.dataset.originalColor = panel.style.backgroundColor;
            panel.dataset.originalText = panel.innerHTML; // 记录面板的原始文字内容
        });

        // 默认展开第一个面板
        let activePanel = panels[0];
        setActivePanel(activePanel);

        // 为每个模块添加鼠标事件
        panels.forEach((panel) => {
            // 鼠标移入事件
            panel.addEventListener("mouseenter", () => {
                // 只有当前面板不是已展开面板时，才会执行折叠
                if (activePanel !== panel) {
                    // 鼠标移入其他面板时，折叠当前面板并展开新面板
                    resetPanels();
                    setActivePanel(panel);
                }
            });

            // 鼠标移出事件
            panel.addEventListener("mouseleave", () => {
                // 当前面板移出时保持展开，不进行折叠
                // 鼠标移出时不做任何操作，保持当前面板展开
            });
        });

        // 重置所有面板的状态
        function resetPanels() {
            panels.forEach((panel) => {
                panel.style.flex = "1"; // 收缩所有面板
                panel.style.backgroundImage = ""; // 移除背景图
                panel.style.backgroundColor = panel.dataset.originalColor; // 恢复原始颜色
                panel.style.opacity = "1"; // 恢复文字可见
                panel.innerHTML = panel.dataset.originalText; // 恢复原始文字
            });
        }

        // 设置某个面板为默认展开状态
        function setActivePanel(panel) {
            // 展开当前面板并显示背景图片
            panel.style.flex = "3";
            panel.style.backgroundImage = 'url("./static/img/GD.jpg")'; // 设置背景图片
            panel.style.backgroundSize = "cover";
            panel.style.backgroundPosition = "center";
            panel.style.backgroundColor = ""; // 移除背景颜色，仅显示图片

            // 在展开时隐藏文字
            panel.innerHTML = ""; // 移除文字

            // 更新默认活动面板
            activePanel = panel;
        }
    });




</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html {
        font-size: 100px;
        max-width: 1920px;
        margin: 0 auto;
    }

    body {
        overflow-y: scroll;
        /* 保留垂直滚动 */
    }

    /* 隐藏滚动条 */
    html::-webkit-scrollbar {
        display: none;
    }

    a {
        text-decoration: none;
        /* 去掉默认下划线 */
        color: #767676;
    }

    .layui-table-header th {
        background-color: #f5f5f5;
        /* 自定义背景颜色 */
        color: #333;
        /* 字体颜色 */
        text-align: center;
        /* 居中对齐 */
    }

    .header {
        height: 0.6rem /* 60/100 */;
        border-bottom: 1px solid #cacdd1;
        display: flex;
        font-size: 0.16rem /* 16/100 */;
        justify-content: space-between;
    }

    .titleBox {
        width: 2.26rem /* 226/100 */;
        height: 100%;
        margin-left: 0.28rem /* 28/100 */;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .logo {
        width: 0.25rem /* 25/100 */;
        height: 0.25rem /* 25/100 */;
        margin-right: 0.08rem /* 8/100 */;
    }

    .title {
        width: 1.92rem /* 192/100 */;
        height: 0.25rem /* 25/100 */;
        font-size: 0.2rem /* 20/100 */;
        color: #244c91;
        font-weight: 600;
        vertical-align: top;
    }

    .ulBox {
        width: 11.76rem /* 1176/100 */;
        padding: 0 1.87rem /* 187/100 */;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
    }

    .login {
        width: 1.16rem /* 116/100 */;
        height: 100%;
        background: #2f5597;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .exponentially {
        height: 17.8rem /* 1780/100 */;
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 0.8rem /* 80/100 */;
    }

    .swiper {
        width: 100%;
        height: 8.9rem;
        /* 890/100 */
        overflow: hidden;
        /* 防止滚动条显示 */
        margin-bottom: 0.8rem /* 80/100 */;
    }

    .swiper-slide > img {
        width: 100%;
    }

    .chart {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .layui-tab {
        margin: 0;
        width: 16rem /* 1600/100 */;
    }

    .layui-tab .layui-tab-title {
        height: 0.57rem /* 57/100 */;
        border: none !important;
    }

    .layui-tab .layui-tab-title li {
        line-height: 0.57rem;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: #fff;
        color: #757575;
        font-size: 0.18rem /* 18/100 */;
        padding: 0;
        border: none;
    }

    .layui-tab-title .layui-this:after {
        content: attr(data-content);
        /* 获取 data-content 属性的值 */
        border: none;
        background-color: #00b0f0;
        color: #fff;
        height: 0.57rem /* 57/100 */;
    }

    .bulletinBoard {
        display: flex !important;
        border: 2px solid #dbdbdb;
        height: 0.5rem;
        line-height: 0.5rem;
        flex-direction: row;
        width: 100%;
        margin-bottom: 0.4rem  /* 40/100 */;
    }

    .marketplaceServices {
        width: 100%;
        height: 554px;
        display: flex;
        justify-content: center;
    }

    .tradeMode {
        width: 100%;
        height: 654px;
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 0.8rem /* 80/100 */;
    }

    .tradeMode > div {
        width: 16rem /* 1600/100 */;
        height: 2rem /* 200/100 */;
        position: absolute;
        background: #00000099;
        top: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin-bottom: 0.5rem;
    }

    .tradeMode > ul {
        height: 100%;
        width: 16rem /* 1600/100 */;
        display: flex;
        gap: 0.4rem /* 40/100 */;
        justify-content: space-evenly;
    }

    .tradeMode > ul > li {
        flex: 5;
        height: 100%;
        overflow: hidden;
        position: relative;
        border-radius: 10px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        /* 添加 box-shadow 的过渡 */
    }

    .tradeMode > ul > li:hover {
        transform: scale(1.05);
        box-shadow: 0 0 10px rgba(70, 130, 180, 0.4),
        0 0 20px rgba(70, 130, 180, 0.3), 0 0 30px rgba(70, 130, 180, 0.2),
        0 0 40px rgba(70, 130, 180, 0.1);
    }

    .tradeMode > ul > li > img {
        width: 100%;
        height: 100%;
        transition: transform 0.4s ease, opacity 0.4s ease;
        /* 单独定义 transform 和 opacity 的过渡 */
        object-fit: cover;
    }

    .layui-tab .layui-tab-title:after {
        border: none;
    }

    .glass-effect {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(30, 31, 34, 0.5);
        backdrop-filter: blur(8px);
        /* 模糊玻璃效果 */
        opacity: 1;
        transition: opacity 0.4s ease;
        /* 玻璃效果的淡化过渡 */
        pointer-events: none;
        /* 确保透明层不拦截鼠标事件 */
    }

    .text-overlay {
        display: flex;
        justify-content: center;
        align-items: start;
        position: absolute;
        width: 0.4rem;
        /* 40/100 */
        height: 0.5rem;
        border-radius: 50%;
        top: 0.3rem /* 30/100 */;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 0.36rem /* 36/100 */;
        color: white;
        background: rgba(0, 0, 0, 0.5);
        padding: 5px 10px;
        opacity: 0;
        transition: opacity 0.4s ease;
        /* 文字渐变过渡 */
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        /* 添加柔和的外发光 */
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fffa,
        0 0 60px #fffa, 0 0 80px #fffa, 0 0 100px #fffa, 0 0 120px #fffa;
        /* 增强的多层发散光晕效果 */
        overflow: hidden;
    }

    .ProServe {
        height: 9.5rem /* 800/100 */;
        width: 100%;
        background: url("./static/img/GD.jpg") no-repeat top center;
        /* 删除多余的引号 */
        background-size: 100% 9rem;
        /* 自定义宽度和高度 */
        display: flex;
        flex-direction: column;
        /* 垂直排列子元素 */
        justify-content: flex-end;
        /* 从容器底部开始排列 */
        align-items: center;
        margin-bottom: 0.8rem /* 80/100 */;
    }

    .container {
        width: 100%;
        height: 5rem;
        padding: 1rem 2rem;
        background-color: #fff;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
        /* 可选：添加阴影 */
    }

    .menu-list {
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        /* 垂直居中 */
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .menu-list li {
        text-align: center;
        display: flex;
        /* 启用 flex 布局 */
        flex-direction: column;
        /* 垂直排列图标和文字 */
        align-items: center;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
    }

    .icon-wrapper {
        width: 0.6rem;
        /* 图标的宽度 */
        height: 0.6rem;
        /* 图标的高度 */
        border-radius: 50%;
        /* 圆形背景 */
        background-color: #337ab7;
        /* 蓝色背景 */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.1rem /* 20/100 */;
    }

    .icon-wrapper img {
        width: 0.4rem;
        /* 图标的大小 */
        height: 4rem;
    }

    .menu-list p {
        font-size: 0.16rem /* 16/100 */;
        color: #333;
        margin: 0;
    }

    .divider {
        width: 1px;
        height: 0.5rem;
        background: #ddd;
        /* 分割线颜色 */
    }

    .horizontal-accordion {
        display: flex;
        width: 16rem;
        /* 1600/100 */
        height: 6.8rem;
        /* 680/100 */
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 0.1rem;
        /* 10/100 */
    }

    .accordion-panel {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        font-weight: bold;
        color: #fff;
        transition: flex 0.5s ease;
        cursor: pointer;
        text-align: center;
    }

    /* 鼠标悬停时放大当前模块 */
    .accordion-panel:hover {
        flex: 3;
    }

    .HubShare {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.8rem  /* 80/100 */;
    }

    .SettlementWarehouse{
        width: 100%;
        height: 8rem  /* 800/100 */;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .SettlementWarehouseContainer{
        background: url("../static/img/A51.jpg") no-repeat top center;");
        background-image: url('your-image.jpg'); /* 替换为你的背景图 URL */
        background-size: cover; /* 让背景图铺满整个页面 */
        background-position: center; /* 使背景图居中 */
        color: #fff;
    }
    .num{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        gap: 0.1rem;
    }
    @media (max-width: 1912px) {
        html {
            font-size: 100px;
            /* 在 1912px 宽度时，字体为 100px */
        }
    }

    @media (max-width: 1528px) {
        html {
            font-size: 80px;
            /* 在 1528px 宽度时，字体按比例变化 */
        }
    }
</style>
</html>
